<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Cabinet CW01 demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="format-detection" content="telephone=no">
    <!--<script type="text/javascript" src="js/adaptive.js"></script>-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../../element-ui/index.ml.css">
    <script type="text/javascript" src="../../js_code/jquery-3.6.1.min.js?v=2"></script>
    <script type="text/javascript" src="../../element-ui/vue.js"></script>
    <!-- import JavaScript -->
    <script type="text/javascript" src="../../element-ui/index.en.js"></script>

    <script src="../../js_code/underscore-min.js"></script>
    <script src="../../js_code/jquery-3.6.1.min.js"></script>
    <script src="../../js_code/iotauth.js"></script>
    <script src="../../js_code/v5_cw01_demo.js"></script>
    <script>
        function refresh2() {
            window.location.reload();
        }
    </script>
    <style>
        .box-card {
            display: inline-block;
        }
    </style>
</head>
<body class="big_show">

<div style="display: block">
    <input id="base_url" value="https://api.bestwond.com" style="width: 200px;border-radius: 5px;">
	Device ID<input id="device_number" value="" style="width: 200px;border-radius: 5px;">

    APP ID<input id="app_id" value="" style="width: 200px;border-radius: 5px;">
    APP Secret<input id="app_secret" value="" style="width: 200px;border-radius: 5px;">
    <!-- <button onclick="kd.get_device_list()">Get Device List</button> -->
</div>
<div id="app" class="screen_app" style="margin-top: 20px;">
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
	  <el-form-item label="Order Id">
		  <el-input clearable  v-model="formInline.order_id" placeholder="Order Id"></el-input>
	  </el-form-item>
	  <el-form-item label="Device Number">
	    <el-input clearable  v-model="formInline.device_number" placeholder="Device Number"></el-input>
	  </el-form-item>
	  <el-form-item label="User Account">
	    <el-input clearable  v-model="formInline.user_id" placeholder="User Account"></el-input>
	  </el-form-item>
	  <el-form-item label="User Password">
	    <el-input clearable  v-model="formInline.code" placeholder="User Password"></el-input>
	  </el-form-item>
	  <el-form-item label="Order Status">
		<el-select clearable  v-model="formInline.status" placeholder="Order Status">
		    <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
	    </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="getOrder">Query</el-button>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="addOrder">New order</el-button>
	  </el-form-item>
		 <el-form-item>
	    <el-button type="primary" @click="addBox">New Box</el-button>
	  </el-form-item>
		 <el-form-item>
	    <el-button type="primary" @click="addUser">New User</el-button>
	  </el-form-item>
	</el-form>
	<el-table
	    :data="tableData"
	    style="width: 100%"
	    max-height="750">
	    <el-table-column
	      fixed
	      prop="order_id"
	      label="Order Id"
	      width="80">
	    </el-table-column>
	    <el-table-column
	      prop="app_id"
	      label="App Id"
	      width="180">
	    </el-table-column>
	    <el-table-column
	      prop="device_number"
	      label="Device Number"
	      width="130">
	    </el-table-column>
	    <el-table-column
	      prop="user_id"
	      label="User Account">
	    </el-table-column>
	    <el-table-column
	      prop="code"
	      label="User Password">
	    </el-table-column>
	    <el-table-column
	      prop="status"
	      label="Order Status"
	      width="120">
	    </el-table-column>
		<el-table-column
		  prop="start_date"
		  label="Start Date"
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="end_date"
		  label="End Date"
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="save_time"
		  label="Save Time"
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="take_time"
		  label="Take Time"
		  width="180">
		</el-table-column>
	    <el-table-column
	      fixed="right"
	      label="Operate"
	      width="180">
	      <template slot-scope="scope">
	        <el-button
	          @click.native.prevent="editOrder(scope.row)"
	          type="text"
	          size="small">
	          Edit Order
	        </el-button>
			<el-button
			  @click.native.prevent="updateOrder(scope.row)"
			  type="text"
			  :disabled="scope.row.device_number == '' || scope.row.save_time !=null"
			  size="small">
			  Update Order
			</el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div class="block">
	      <el-pagination
	        @size-change="handleSizeChange"
	        @current-change="handleCurrentChange"
	        :current-page="formInline.page_num"
	        :page-sizes="[10, 20, 50, 100]"
	        :page-size="formInline.page_size"
	        layout="total, sizes, prev, pager, next, jumper"
	        :total="total">
	      </el-pagination>
	    </div>
	  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
	    <el-form :model="dialogForm">
	      <el-form-item label="User Account" :label-width="formLabelWidth">
	        <el-input v-model="dialogForm.order_no" autocomplete="off" :disabled="title!='Add'"></el-input>
	      </el-form-item>
	    </el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible = false">Cancel</el-button>
	      <el-button type="primary" @click="yesBtn">Confirm</el-button>
	    </div>
	  </el-dialog>
</div>
</div>
</body>

<script>
    bw = new Vue({
        el: '#app',
        data: {
            tableData: [],
			formInline:{
				page_num:1,
				page_size:10
			},
			total:0,
			dialogFormVisible:false,
			formLabelWidth:"120px",
			dialogForm:{
			},
			title:'Add',
			options: [{
			  value: 'CONFIRMED',
			  label: 'CONFIRMED'
			}, {
			  value: 'CHECK_OUT',
			  label: 'CHECK_OUT'
			}, {
			  value: 'ONGOING',
			  label: 'ONGOING'
			}, {
			  value: 'CHECK_IN',
			  label: 'CHECK_IN'
			}, {
			  value: 'IN_PROGRESS',
			  label: 'IN_PROGRESS'
			}],
        },
        created: function () {
			this.getOrder()
        },
        methods: {
			handleSizeChange(val){
				this.formInline.page_size = val
				this.getOrder()
			},
			handleCurrentChange(val){
				this.formInline.page_num = val
				this.getOrder()
			},
			addOrder(){
				this.title = 'Add'
				this.dialogFormVisible = true
			},
			addBox(){
				this.title = 'Box'
				this.dialogFormVisible = true
			},
			addUser(){
				this.title = 'User'
				this.dialogFormVisible = true
			},
			getOrder(){
				let data = kd.bw_api('/api/iot/v5/get/orders/',this.formInline)
				console.log(data)
				if(data.code == 0){
					this.tableData = data.data.list
					this.total = data.data.page.total_count
				}else{
					this.$message.error(data.msg)
				}
			},
			yesBtn(){
				if(this.dialogForm.order_id){
					let dataFrom = {
						"device_number":this.dialogForm.device_number,
						"order_id": this.dialogForm.order_id,
						"start_date": this.dialogForm.start_date,
						"end_date": this.dialogForm.end_date
					}
					let data = kd.bw_api('/api/iot/v5/update/order/',dataFrom)
					console.log(data)
					if(data.code == 0){
						this.$message.success('success')
						this.dialogForm = {}
						this.getOrder()
						this.dialogFormVisible = false
					}else{
						this.$message.error(data.msg)
					}
				}else{
				    let dataFrom = {
						"device_number":this.dialogForm.device_number,
						"order_id": this.dialogForm.order_id,
						"start_date": this.dialogForm.start_date,
						"end_date": this.dialogForm.end_date
					}
					let data = kd.bw_api('/api/iot/set/device/order/',this.dialogForm)
					console.log(data)
					if(data.code == 0){
						this.$message.success('success')
						this.dialogForm = {}
						this.getOrder()
						this.dialogFormVisible = false
					}else{
						this.$message.error(data.msg)
					}
				}
				
			},
			editOrder(data){
				this.title = 'Edit'
				this.dialogFormVisible = true
				this.dialogForm = JSON.parse(JSON.stringify(data))
			},
			updateOrder(data){
				let dataFrom = {
					"device_number":data.device_number,
					"order_id": data.order_id,
					"status":"ONGOING"
				}
				let dataT = kd.bw_api('/api/iot/v5/update/order/',dataFrom)
				console.log(dataT)
				if(dataT.code == 0){
					this.getOrder()
					this.$message.success('success')
				}else{
					this.$message.error(dataT.msg)
				}
			}
        }
    });
</script>
</html>
